<!DOCTYPE html>
<html lang="en">
	<head>
	
    <title>CBE BPE Toolkit - Maps</title>

	<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/anytime/css/anytimec.css"/>
    <link rel="stylesheet" type="text/css" href="/static/jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" type="text/css" href="/static/pmp/css/plot.css"/>
    <style type="text/css">
      body {
        padding-top: 55px;
        padding-bottom: 30px;
      }
      .sidebar-nav {
        padding: 5px 0;
      }
    </style>
    <script type="text/javascript" src="/static/jquery-1.7.2/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/sessvars/sessvars.js"></script>
    <script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
	
	<script>
		$(document).ready(function(){
			$("li#" + window.location.pathname.substring(5, window.location.pathname.length - 1)).addClass("active")
		    $('select#id_name').change(function() { 
	    		projectId = $(this).val();
	    		if (typeof sessvars.sessionObj != 'undefined'){sessvars.sessionObj['projectId'] = projectId;}
	    		else {sessvars.sessionObj={'projectId': projectId}}
				updateMapForm(projectId);
	    	})
		})
		function updateMapForm(projectId){
			$.ajax({
				type: "POST",
				url: '/pmp/maps/',
				data: {'projectId': projectId, 'select': 'select'},
				success: function(data){
					$('#mapsForm').html(data)	        
				}
			});
		}
		$.fn.serializeObject = function() {
		  var arrayData, objectData;
		  arrayData = this.serializeArray();
		  objectData = {};
		
		  $.each(arrayData, function() {
		    var value;
		
		    if (this.value != null) {
		      value = this.value;
		    } else {
		      value = '';
		    }
		
		    if (objectData[this.name] != null) {
		      if (!objectData[this.name].push) {
		        objectData[this.name] = [objectData[this.name]];
		      }
		
		      objectData[this.name].push(value);
		    } else {
		      objectData[this.name] = value;
		    }
		  });
		
		  return objectData;
		};
	</script>
  </head>

  <body>
	{% include 'header.html' %}
        <div class="span10" id="mainContent">
        	<h4>Map definition <a target="_blank" href="/static/doc/_build/html/maps.html"><i class="icon-info-sign" style="margin-top: 5px"></i></a></h4><br>
        	<p>Use this page to define new maps or edit existing maps. When adding a new map, only the floor and the MapTiler zip file need to be specified. The other fields will be determined automatically.</p>
        	<div id="mapsForm">
        	 {% include 'mapsInline.html' %}
	       	</div>
        </div><!--/span10-->
      </div><!--/row-->
      <hr>
	{% include 'footer.html' %}
    </div><!--/.fluid-container-->

<script>
	if (typeof sessvars.sessionObj != 'undefined'){
		for (var i=0;i<document.getElementById('id_name').options.length;i++) {
			if (document.getElementById('id_name').options[i].value == sessvars.sessionObj['projectId'])
			{document.getElementById('id_name').options[i].selected = true;}
		}
	}
	else {sessvars.sessionObj = {'projectId': document.getElementById('id_name').options[0].value}} //set the saved variable to the initial value if undefined
	updateMapForm(sessvars.sessionObj['projectId']);
</script>
</body></html>